<template>
  <a-layout class="registercontent">
    隐私声明：你的信息是进入合法公开的能源交易市场的基本保障，本系统尊重并保护所有使用服务用户的个人隐私权，
    由于网站将不可避免地与您产生直接或间接互动关系
    故特此声明对用户个人信息所采取的收集使用和保护。
    <a-form
      class="registerform"
      :model="registerParam"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-typography-title style="text-align: center"
        >用户注册</a-typography-title
      >
      <a-form-item label="姓名" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input v-model:value="registerParam.name" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item label="性别" :wrapper-col="{ span: 15, offset: 4 }">
        <a-select
          ref="select"
          v-model:value="registerParam.sex"
          style="width: 100%"
          placeholder="请输入性别"
        >
          <a-select-option value="false">男</a-select-option>
          <a-select-option value="true">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="年龄" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-number
          v-model:value="registerParam.age"
          placeholder="请输入年龄"
          :min="1"
          :max="120"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="住址" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.address"
          placeholder="请输入住址"
        />
      </a-form-item>
      <a-form-item label="所在单位" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.work_unit"
          placeholder="请输入所在单位"
        />
      </a-form-item>
      <a-form-item label="联系电话" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.phone_number"
          placeholder="请输入联系电话"
        />
      </a-form-item>
      <a-form-item label="身份证号" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.id_number"
          placeholder="请输入身份证号"
        />
      </a-form-item>
      <a-form-item label="电子邮箱" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.email"
          placeholder="请输入电子邮箱"
        />
      </a-form-item>
      <a-form-item label="所属电表ID" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input
          v-model:value="registerParam.elec_meter_id"
          placeholder="请输入所属电表ID"
        />
      </a-form-item>
      <a-form-item label="个人说明" :wrapper-col="{ span: 15, offset: 4 }">
        <a-textarea
          v-model:value="registerParam.user_desc"
          placeholder="请输入个人说明"
          allow-clear
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="register">立即注册</a-button>
          <a-button type="primary" @click="clear">重 &nbsp; &nbsp; 置</a-button>
          <a-button type="primary" @click="goLogin">返回登录页 </a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
</template>

<script>
import { reactive, defineComponent, h } from "vue";
import { post } from "@/common";
import { useRouter } from "vue-router";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const success = (info) => {
      message.success(info);
    };
    const error = (info) => {
      message.error(info);
    };
    const router = useRouter();
    //reactive 双向绑定响应框
    const registerParam = reactive({
      name: "",
      sex: undefined,
      age: "",
      address: "",
      work_unit: "",
      email: "",
      phone_number: "",
      id_number: "",
      elec_meter_id: "",
      user_desc: "",
    });

    const clear = () => {
      (registerParam.name = ""),
        (registerParam.sex = undefined),
        (registerParam.age = ""),
        (registerParam.address = ""),
        (registerParam.work_unit = ""),
        (registerParam.email = ""),
        (registerParam.phone_number = ""),
        (registerParam.id_number = ""),
        (registerParam.elec_meter_id = ""),
        (registerParam.user_desc = "");
    };

    const register = () => {
      if (
        registerParam.name == "" ||
        registerParam.sex == undefined ||
        registerParam.age == "" ||
        registerParam.address == "" ||
        registerParam.work_unit == "" ||
        registerParam.email == "" ||
        registerParam.phone_number == "" ||
        registerParam.id_number == "" ||
        registerParam.elec_meter_id == ""
      ) {
        error("数据不能为空！");
        return;
      }
      if (registerParam.phone_number.length != 11) {
        error("手机号格式不正确！");
        return;
      }
      if (registerParam.id_number.length != 18) {
        error("身份证号不正确！");
        return;
      }
      post("/security/register", registerParam).then((res) => {
        data.public_key = res.data.public_key;
        data.private_key = res.data.private_key;
        sequenceDownload();
        Modal.success({
          title: "注册成功，请记录你的账户信息，文件已下载在本地！",
          content: h("div", {}, [
            h("p", "公钥：" + res.data.public_key),
            h("p", "私钥：" + res.data.private_key),
          ]),
          width: "1000px",
        });
        // 跳转至Home路由
        router.push({ path: "/login" });
      });
    };

    const goLogin = () => {
      router.push({ path: "/login" });
    };

    // 一行有24列
    const labelCol = {
      span: 4,
    };
    const wrapperCol = {
      span: 14,
    };

    var data = {
      public_key: undefined,
      private_key: undefined,
    };

    const sequenceDownload = () => {
      var element = document.createElement("a");
      var message = "";
      message += "公钥:" + "\n" + data.public_key + "\n";
      message += "私钥:" + "\n" + data.private_key;
      element.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," + encodeURIComponent(message)
      );
      element.setAttribute("download", "注册信息");
      element.style.display = "none";
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    };

    return {
      data,
      sequenceDownload,
      success,
      error,
      goLogin,
      router,
      registerParam,
      clear,
      register,
      labelCol,
      wrapperCol,
    };
  },
});
</script>
<style>
.registercontent {
  display: flex;
  flex-direction: column;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}
.registerform {
  opacity: 0.95;
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>